Flutter app 4.添加主页面

1.创建主页面

创建主页面
pages/MainPage.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _MainPageState();
  }
}

class _MainPageState extends State<MainPage> {
  int _tabIndex = 0;
  final tabTextStyleNormal = new TextStyle(color: const Color(0xff969696));
  final tabTextStyleSelected = new TextStyle(color: const Color(0xFFf39b63));

  var tabImages;
  var _body;
  var appBarTitles = ['MySnap', 'Security', 'Me'];

  Image getTabImage(path) {
    return new Image.asset(path, width: 20.0, height: 20.0);
  }

  void initData() {
    if (tabImages == null) {
      tabImages = [
        [
          getTabImage('images/tab_icon_snap_0.png'),
          getTabImage('images/tab_icon_snap_1.png')
        ],
        [
          getTabImage('images/tab_icon_security_0.png'),
          getTabImage('images/tab_icon_security_1.png')
        ],
        [
          getTabImage('images/tab_icon_me_0.png'),
          getTabImage('images/tab_icon_me_1.png')
        ]
      ];
    }
    _body = new IndexedStack(
      children: <Widget>[
        new MyTabPage(),
        new MyTabPage(),
        new MyTabPage()
      ],
      index: _tabIndex,
    );
  }

  TextStyle getTabTextStyle(int curIndex) {
    if (curIndex == _tabIndex) {
      return tabTextStyleSelected;
    }
    return tabTextStyleNormal;
  }

  Image getTabIcon(int curIndex) {
    if (curIndex == _tabIndex) {
      return tabImages[curIndex][1];
    }
    return tabImages[curIndex][0];
  }

  Text getTabTitle(int curIndex) {
    return new Text(appBarTitles[curIndex], style: getTabTextStyle(curIndex));
  }

  @override
  Widget build(BuildContext context) {
    initData();
    return new MaterialApp(
      theme: new ThemeData(
          primaryColor: const Color(0xFFf39b63)
      ),
      home: new Scaffold(
        appBar: new AppBar(
            title: new Text(appBarTitles[_tabIndex], style: new TextStyle(color: Colors.white)),
            iconTheme: new IconThemeData(color: Colors.white)
        ),
        body: _body,
        bottomNavigationBar: new CupertinoTabBar(
          items: <BottomNavigationBarItem>[
            new BottomNavigationBarItem(
                icon: getTabIcon(0),
                title: getTabTitle(0)),
            new BottomNavigationBarItem(
                icon: getTabIcon(1),
                title: getTabTitle(1)),
            new BottomNavigationBarItem(
                icon: getTabIcon(2),
                title: getTabTitle(2)),
          ],
          currentIndex: _tabIndex,
          onTap: (index) {
            setState((){
              _tabIndex = index;
            });
          },
        ),
      ),
    );
  }
}

2.添加图片资源目录

images/

图片 放在 images/ 下

在 pubspec.yaml 中 修改

添加

assets:
      - images/tab_icon_snap_0.png
      - images/tab_icon_snap_1.png

      - images/tab_icon_security_0.png
      - images/tab_icon_security_1.png

      - images/tab_icon_me_0.png
      - images/tab_icon_me_1.png

创建 /pages/MyTabPage.dart

import 'package:flutter/material.dart';

class MyTabPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MyTabPageState();
  }
}

class MyTabPageState extends State<MyTabPage> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return  new Center(
      child: new Text('提示'),
    );
  }
}

3.启动主页面

管理多个用户界面有两个核心概念和类：路由（Route）和导航器（Navigator），

路由（Route）是应用程序的“屏幕”或“页面”的抽象，导航器（Navigator）是管理路由的控件。

导航器（Navigator）可以推送（push）和弹出（pop）路由来帮助用户从当前屏幕移动到另一个屏幕。

---

Navigator的跳转有两种，一种是显示跳转，需要我们在MaterialPageRoute中指定widget

Navigator.of(context).push(new MaterialPageRoute(builder: (context) {
      //指定跳转的页面
      return new Demo1();
    },));

另一种是隐身跳转，这种跳转需要先定义，后使用，跳转方式就像Arouter一样的路径方式，定义部分需要在MaterialApp下定义routes，routes就跟一个Map<path,Page>集合一样，定义好了path对应的page，那么下次跳转，我们就可以针对path去跳转了

@override
Widget build(BuildContext context) {
  return new MaterialApp(
    home: new Scaffold(
      body: new Center(child: new RaisedButton(onPressed: _pushPage,child: new Text("跳转"))),
    ),
    //定义路由
    routes: <String,WidgetBuilder>{
      "/demo1":(BuildContext context)=>new Demo1(),
    },
  );

跳转使用

Navigator.of(context).pushNamed("/demo1");

注意 context 表示 不对跳转 效果也不对

参考 https://blog.csdn.net/u013000152/article/details/80940682

在 LoginPage.dart 登陆完成 启动主页面

Navigator.of(context).push(new MaterialPageRoute(
              builder: (ctx) => new MainPage()
          ));